<template>
  <div>
    <!--<baidu-map :style="{width:map.width,height:map.height}" class="map"  :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}"-->
    <!--@ready="handler" :scroll-wheel-zoom="true">-->
    <!--&lt;!&ndash;比例尺控件&ndash;&gt;-->
    <!--<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>-->
    <!--&lt;!&ndash;缩放控件&ndash;&gt;-->
    <!--<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>-->
    <!--&lt;!&ndash;聚合动态添加的点坐标&ndash;&gt;-->
    <!--<bm-marker-clusterer :averageCenter="true">-->
    <!--<bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)"></bm-marker>-->
    <!--</bm-marker-clusterer>-->
    <!--&lt;!&ndash;信息窗体&ndash;&gt;-->
    <!--<bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">-->
    <!--<p><span class="left">单位面积能耗：</span><span class="right">{{infoWindow.info.areaEnergy}}kWh/㎡</span></p>-->
    <!--<p><span class="left">建筑面积：</span><span class="right">{{infoWindow.info.area}}㎡</span></p>-->
    <!--<p><span class="left">电耗：</span><span class="right">{{infoWindow.info.energy}}kWh</span></p>-->
    <!--<p><span class="left">水耗：</span><span class="right">{{infoWindow.info.water}}m³</span></p>-->
    <!--<p><span class="left">气耗：</span><span class="right">{{infoWindow.info.air}}m³</span></p>-->
    <!--</bm-info-window>-->
    <!--</baidu-map>-->
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:20rem"  :scroll-wheel-zoom='true'>
      <bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="false" :autoLocation="true"
                      @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
      </bm-geolocation>
      <!--<bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>-->

      <!-- 自定义定位图标覆盖物 -->
      <bm-marker :position="autoLocationPoint" v-if="initLocation">
      </bm-marker>
      <div v-for="marker of markers">
        <bm-marker  :position="{lng: marker.lng, lat: marker.lat}" :title="marker.name" @click="infoWindowOpen(marker)">
          <bm-info-window title="车辆信息" :position="{lng: marker.lng, lat: marker.lat}"   :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
            <div>李晓明</div>
            <div>川zUz693</div>
            <div class="btn-bottom-right">
              <span class="btn-bottom-right-style">求带</span>
            </div>
          </bm-info-window>
        </bm-marker>
      </div>
    </baidu-map>
    <!--列表和已接人数-->
    <div class="footer-fixed">
      <div class="btn-bottom">
        <div class="btn-bottom-left" @click="targetLogin()">
          <span class="btn-bottom-style">尚未拼车</span>
        </div>
        <div class="right" @click="targetList()">
          <div class="btn-bottom-right">
            <span class="btn-bottom-right-style">列表</span>
          </div>
          <div class="circle">2</div>
        </div>
      </div>
    </div>



  </div>
</template>


<script>
  // import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  // import BmScale from 'vue-baidu-map/components/controls/Scale'
  // import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  // import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  // import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  // import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  export default {
    name: "upPerson",
    data(){
      return{

        realName:'',
        phone:'',
        imgHeader:'',
        mod_img:'',
        center: '',
        zoom:12,
        showInfo:true,
        mod_title:'hello',
        markers: [
          {
            lng: 116.405,
            lat: 39.901,
            showFlag:false
          },
          {
            lng: 116.404,
            lat: 39.900,
            showFlag:false
          }
        ],
        autoLocationPoint: {lng: 0, lat: 0},
        initLocation: false,


      }
    },
    mounted(){


    },
    methods:{
      getLoctionSuccess(){

      },
      getLocationError(){

      },
      infoWindowClose(marker) {
        marker.showFlag = false
      },
      infoWindowOpen(marker) {
        marker.showFlag = true
      },
      handler ({BMap, map}) {
        let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
          _this.initLocation = true;
          console.log('center:', _this.center)	// 如果这里直接使用this是不行的
        },{enableHighAccuracy: true})

        console.log("获取地图的高")
        console.log(map)

        // var geolocation = new BMap.Geolocation();
        // var point = new BMap.Point(109.49926175379778, 36.60449676862417)
        // map.centerAndZoom(point, 13)
        // var marker = new BMap.Marker(point) // 创建标注
        // map.addOverlay(marker) // 将标注添加到地图中
        // var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
        // map.addOverlay(circle)

        // var opts = {
        //   width : 250,     // 信息窗口宽度
        //   height: 100,     // 信息窗口高度
        //   title : "Hello"  // 信息窗口标题
        // }
        // var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
        // map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

      },
      targetList(){
        this.$router.push({
          name:"ownerList",
          query:{
            title:"乘客"
          }
        })
      },
      backTo(){
        this.$router.push("person")
      },
    },
    components:{


    }
  }

</script>

<style scoped lang="less" >
  .footer-fixed{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:80%;
    .btn-bottom-right{
      width:1.78rem;
      height:0.8rem;
      border-radius:0.8rem;
      background:#ff5a00;
      display:flex;
      align-items: center;
      justify-content: center;
      .btn-bottom-right-style{
        font-size:0.35rem;
        color:#fff;
      }
    }
  }

  .btn-bottom{
    width:100%;
    height:2rem;
    margin-top:0.5rem;
    //border:1px solid blue;
    background:rgba(0,0,0,0.3);

    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    .btn-bottom-left{
      width:auto;
      height:0.8rem;
      /*border-radius:0.8rem;*/
      padding:0.1rem;
      /*background:#ff5a00;*/
      display:flex;
      align-items: center;
      justify-content: center;
      .btn-bottom-style{
        font-size:0.35rem;
        color:#ff5a00;
      }
    }
    .right{
      position:relative;
      .btn-bottom-right{
        width:2rem;
        height:0.8rem;
        border-radius:0.8rem;
        background:#ff5a00;
        display:flex;
        align-items: center;
        justify-content: center;
        .btn-bottom-right-style{
          font-size:0.35rem;
          color:#fff;
        }
      }
      .circle{
        width:0.38rem;
        height:0.38rem;
        border-radius:50%;
        background:#ffffff;
        color:#ff5a00;
        position:absolute;
        left:1.6rem;
        right:0;
        bottom:0;
        top:-0.1rem;

      }
    }


  }
</style>
